<template>
  <HPopup style="height: 80vh" v-model:show="innerShow" :title="subForm?.formName">
    <VerticalLayout style="background: #f1f5f8">
      <renderFields/>
      <template #footer>
        <SubTableRowEditorPagination
            :dataSource="dataSource"
            v-model:formModel="editingFormModel"
            v-model:rowIndex="editingRowIndex"/>
        <SubTableRowEditorFooter @copy="copy" @saveAndClose="close" @remove="remove"/>
      </template>
    </VerticalLayout>
  </HPopup>
</template>
<script setup>
import HPopup from '@comp/HPopup/HPopup.vue';
import {computed, h, nextTick, ref, shallowRef, watch} from 'vue';
import {closePopup, createProps, guid} from '@/utils';
import FormComponentDelegate from '@comp/FormEngine/FormComponentDelegate.vue';
import VerticalLayout from '@comp/Layout/VerticalLayout.vue';
import SubTableRowEditorFooter from '@comp/FormEngine/field/SubTable/SubTableRowEditorFooter.vue';
import SubTableRowEditorPagination from '@comp/FormEngine/field/SubTable/SubTableRowEditorPagination.vue';
import {showConfirmDialog} from 'vant';

defineOptions({name: 'SubTableRowEditor'});
const props = defineProps({
  show: createProps(Boolean),
  rowIndex: createProps(Number),
  dataSource: createProps(Array, () => []),
  config: createProps(Object, () => undefined),
  context: createProps(Object, () => undefined),
  subForm: createProps(Object, () => undefined),
  formModel: createProps(Object, () => undefined),
});
const emits = defineEmits(['update:show']);
const editingFormModel = ref();
const editingRowIndex = shallowRef();

function remove() {
  showConfirmDialog({
    title: '确定删除吗',
    message: '删除后不可恢复, 确定删除吗',
  }).then(() => {
    props.dataSource.splice(editingRowIndex.value, 1);
    removed();
  });
}

function copy() {
  let row = JSON.parse(JSON.stringify(editingFormModel.value));
  row.id = guid();
  row._isNew = true;

  // this.copyRelation(originRow.id, row.id)
  props.dataSource.push(row);

  editingRowIndex.value = props.dataSource.length - 1;
  editingFormModel.value = props.dataSource[editingRowIndex.value];

  props?.context?.formFieldUpdate();
}

function removed() {
  nextTick(() => {
    props?.context?.formFieldUpdate();
  })
  if (props.dataSource.length === 0) return close();
  if (editingRowIndex.value >= props.dataSource.length) {
    editingRowIndex.value--;
  }
  editingFormModel.value = props.dataSource[editingRowIndex.value];
}

function close() {
  closePopup();
}

const innerShow = computed({
  get() {
    return props.show || false;
  },
  set(val) {
    emits('update:show', val);
  }
});

watch(() => props.show, () => {
  nextTick(() => {
    if (props.show) {
      editingFormModel.value = props.formModel;
      editingRowIndex.value = props.rowIndex;
    }
  });
}, {
  immediate: true,
});

watch(() => [props.dataSource, editingRowIndex.value], () => {
  try {
    nextTick(() => {
      editingFormModel.value = props.dataSource[editingRowIndex.value];
    })
  } catch(e) {
    console.error(e)
  }
}, {
  immediate: true,
})

function renderFields() {
  if (!props?.config?.content) return [];
  return props?.config?.content.map(item => h(FormComponentDelegate, {
    config: item,
    context: props.context,
    formModel: editingFormModel.value,
    rowIndex: editingRowIndex.value,
    forceDetail: false,
    rowId: props?.formModel?.id,
    subFormId: props.subForm.id,
  }));
}


</script>
<style scoped lang="less">

</style>